
<script setup>

</script>

<template>
	<view class="content">
		<view class="cartInfo tran">
			
		</view>
		<view class="cartInfo">
			<view class="cartop">
				<view class="carimage">
					<image style="width: 100%; height: 100%;" src="../../static/my/矩形 4(1).png" mode=""></image>
				</view>
				<view class="">
					<view class="top_text">
						姓名： 水水
					</view>
					<view class="top_text">
						年龄： 七个月
					</view>
					<view class="top_text">
						体重： 2kg
					</view>
					<view class="top_text">
						性别： 男生
					</view>
					<view class="top_text">
						种类： 布偶猫
					</view>
				</view>
				
			</view>
			<text style="padding: 30rpx 0; font-size: 32rpx; font-weight: 700;border-bottom: 1px solid black;display: block; width: 586rpx;">是否绝育： 已绝育</text>
		<view class="yimiao">
			<view class="">
				接种疫苗：
			</view>
			<view class="ymInfo">
				<p class="ym_p">已接种猫三联疫苗</p>
				<p class="ym_p">已接种狂犬疫苗</p>
			</view>
		</view>
		<view class="yimiao">
			<view style="margin-right: 60rpx; white-space: nowrap;">
				性格：
			</view>
			<view class="ymInfo">
				<p class="ym_p">懒惰，不爱动，还有点小傲娇</p>
			</view>
		</view>
		<view class="live_Img">
			<view class="title">
				日常照片：
			</view>
			<view class="Img_cart">
				<view class="image image1">
					<image style="width: 100%; height: 100%; "  src="../../static/my/矩形 4(1).png" mode="aspectFill"></image>
				</view>
			<view class="image">
				<image style="width: 100%; height: 100%; "  src="../../static/my/矩形 4(1).png" mode="aspectFill"></image>
			</view>
			<view class="image">
				<image style="width: 100%; height: 100%; "  src="../../static/my/矩形 4(1).png" mode="aspectFill"></image>
			</view>
			<view class="image">
				<image style="width: 100%; height: 100%; "  src="../../static/my/矩形 4(1).png" mode="aspectFill"></image>
			</view>
			<view class="image">
				<image style="width: 100%; height: 100%; "  src="../../static/my/矩形 4(1).png" mode="aspectFill"></image>
			</view>
			</view>
		</view>
		
		</view>
	
	</view>
</template>


<style lang="scss" scoped>

.cartInfo{
	position: absolute;
	padding: 30rpx;
	top: 20rpx;
	margin-left: 50rpx;
	width: 586rpx;
	height: 1070rpx;
	background-color: #fff;
    border: 2px solid black;
	border-radius:35rpx;
	.live_Img{
		font-size: 32rpx;
		font-weight: 700;
		width: 540rpx;
		height: 300rpx;
		margin-top: 20rpx;
		background-color: #fffce0;
		border: 2px solid black;
		border-radius: 15rpx;
		padding: 20rpx;
		.title{
			margin-bottom: 15rpx;
		}
		.Img_cart{
			width: 540rpx;
			height: 250rpx;
			display: grid;
			grid-gap: 5rpx;
			 grid-template-columns: auto auto auto auto;
			 .image{
				 
			 }
			 .image1{
				 grid-row: 1 / 3;
				  grid-column: 1 / 3;
			 }
		}
	}
	.yimiao{
		margin-top: 20rpx;
		display: flex;
	
		font-size: 32rpx;
		font-weight: 700;
		border-bottom: 1px solid black;
		.ymInfo{
			
			.ym_p{
				margin-bottom: 20rpx;
				
			}
		}
	}
	.cartop{
		display: flex;
		.carimage{
			width: 280rpx;
			height: 340rpx;
			margin-right: 30rpx;
		}
		.top_text{
			margin-bottom: 30rpx;
			font-size: 32rpx;
			font-weight: 700;
		}
		.top_text:first-child{
			margin-top: 15rpx;
		}
	}
	
	
}
	.tran{
		transform: rotateZ(-4deg);
		height: 970rpx;
	}
</style>
